<template>
    <a-config-provider :locale="zhCN">
        <div class="gp_main_panel">
            <div class="app-content">
                <div class="layout-root">
                    <div class="layout-content no-header map-container-src">
                        <div class="layout-left" id="left-item" style="overflow: auto;margin-right: 1px;">
                            <div class="layout-right-content" style="padding:0px;">
                                <div id="map-container-src" class="map-container-src">
                                    <div class="map-container">
                                        <div @contextmenu.prevent="" id="mapcontainer" class="map-container"
                                            style="position: absolute;width: 100%;" @dragover="e=>e.preventDefault()">
                                        </div>
                                    </div>
                                    <div class="map-bottom-container">
                                        <label id="show-geom-label">坐标:{{ map_xyz?.x }}-{{ map_xyz?.y }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layout-right">
                            <a-row style="width: 100%;margin: 5px 5px;">
                                <a-space>
                                    <a-tooltip placement="bottom" color="rgb(19 32 41 / 75%)">
                                        <template #title>添加服务</template>
                                        <plus-circle-filled style="font-size: 22px;vertical-align: middle;color: #3bb9d1;"
                                            @click="add_wmts" />
                                    </a-tooltip>
                                    <a-tooltip placement="bottom" color="rgb(19 32 41 / 75%)">
                                        <template #title>刷新</template>
                                        <redo-outlined style="font-size: 22px;vertical-align: middle;color: #3bb9d1;"
                                            @click="refresh_layers" />
                                    </a-tooltip>
                                </a-space>
                            </a-row>
                            <a-row style="width: 100%;margin: 5px 5px;">
                                <a-table 
                                :data-source="layer_data" 
                                :columns="layer_table_columns" 
                                class="records_table"
                                size="small" 
                                :showHeader="true" 
                                tableLayout="fixed"
                                :pagination="layer_table_pagination" 
                                @change="layer_table_pagination_change"
                                :customRow="layer_table_row_event" 
                                bordered 
                                rowKey="_id">
                                <template #bodyCell="{ text, record, index, column }">
                                    <template v-if="column.dataIndex == 'stype'">
                                        {{ record?.src?.type }}
                                    </template>
                                    <template v-if="column.dataIndex == 'temptype'">
                                        {{ record?.cache?.type }}
                                    </template>
                                    <template v-if="column.dataIndex == 'operation'">
                                        <eye-filled style="font-size: 16px;vertical-align: middle;" @click="show_layer(record)" v-if="record?.show_tile==false"/>
                                        <eye-invisible-filled style="font-size: 16px;vertical-align: middle;" @click="hide_layer(record)" v-if="record?.show_tile==true"/>
                                        <a-divider type="vertical" />
                                        <!-- 
                                        <template v-if="record?.src?.tif_type=='cog' && record?.src?.type=='tif'">
                                            <eye-filled style="font-size: 16px;vertical-align: middle;" @click="show_cog_layer(record)" v-if="record?.show_cog==false"/>
                                            <eye-invisible-filled style="font-size: 16px;vertical-align: middle;" @click="hide_cog_layer(record)" v-if="record?.show_cog==true"/>
                                            <a-divider type="vertical" />
                                        </template> -->
                                        <span class="table-operation">
                                            <a-dropdown>
                                                <a class="ant-dropdown-link" @click.prevent>编辑
                                                    <DownOutlined />
                                                </a>
                                                
                                                <template #overlay>
                                                    <a-menu>
                                                        <a-menu-item>
                                                            <a href="javascript:;" @click="show_Capabilities(record)">Capabilities</a>
                                                        </a-menu-item>
                                                        <a-menu-item>
                                                            <a href="javascript:;" @click="delete_layer(record)">删除</a>
                                                        </a-menu-item>
                                                    </a-menu>
                                                </template>
                                            </a-dropdown>
                                        </span>
                                    </template>
                                </template>
                                </a-table>
                            </a-row>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a-drawer title="添加服务" placement="right" width="60%" :closable="false" :visible="add_wmts_visible"
        @close="add_wmts_drawer_close" class="my-drawer tif_objec_drawer" >
        <template #extra>
            <a-tooltip placement="bottom">
                <template #title>添加</template>
                <a-button @click="enable_add_wmts" style="margin: 0 auto;margin-right: 10px;">
                    <template #icon><check-outlined /></template>
                </a-button>
            </a-tooltip>
        </template>
        <a-tabs v-model:activeKey="tabs_activeKey" class="white-collapse">
            <a-tab-pane key="add_wmts_src" tab="输入服务">
                <a-form :model="new_wmts" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" autocomplete="off">
                    <a-form-item label="服务名">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts.name"/>
                        </a-col>
                    </a-form-item>
                    <a-form-item label="输入坐标系">
                        <a-col :span="22">
                            <a-select v-model:value="new_wmts.in_wkid" style="width: 100%" placeholder="">
                                <a-select-option value="4326">c(4490/4326)</a-select-option>
                                <a-select-option value="3857">w(3857)</a-select-option>
                            </a-select>
                        </a-col>
                    </a-form-item>
                    <!-- <a-form-item label="输出级别">
                        <a-col :span="22">
                            <a-select v-model:value="new_wmts.identifiers" mode="tags" style="width: 100%" placeholder="">
                                <a-select-option :value="count" v-for="count in 22">{{ count }}</a-select-option>
                            </a-select>
                        </a-col>
                    </a-form-item> -->
                    <a-form-item label="类型">
                        <a-col :span="22">
                            <a-select v-model:value="new_wmts.type" style="width: 100%" placeholder="" size="small">
                                <a-select-option value="tif">tif</a-select-option>
                                <!-- <a-select-option value="bundle">bundle</a-select-option>
                                <a-select-option value="request">request</a-select-option> -->
                                <!-- <a-select-option value="tile">tile</a-select-option> -->
                            </a-select>
                            <a-alert message="支持geotif(带金字塔为佳)、Cloud optimized GeoTIFF直接发布为wmts." banner type="warning" v-if="new_wmts.type=='tif'"/>
                            <a-alert message="支持arcgis 切片bundle文件夹(指定到_alllayers的上级目录)直接发布为wmts." banner type="warning" v-if="new_wmts.type=='bundle'"/>
                            <a-alert message="支持缓存其他地图服务直接发布为wmts." banner type="warning" v-if="new_wmts.type=='request'"/>
                            <a-alert message="支持已缓存的切片直接发布为wmts." banner type="warning" v-if="new_wmts.type=='tile'"/>
                        </a-col>
                    </a-form-item>
                    <!-- tif -->
                    <a-form-item label="TIF类型" v-if="new_wmts.type=='tif'">
                        <a-col :span="22">
                            <a-select v-model:value="new_wmts.tif_type" style="width: 100%" placeholder="" size="small">
                                <a-select-option value="tif">常规GEOTIFF</a-select-option>
                                <a-select-option value="cog">Cloud optimized GeoTIFF</a-select-option>
                            </a-select>
                        </a-col>
                    </a-form-item>
                    <a-form-item label="存储类型" v-if="new_wmts.type=='tif'">
                        <a-col :span="21">
                            <a-select v-model:value="new_wmts.tif_storege_type" style="width: 100%" placeholder="" size="small">
                                <a-select-option value="local">本地文件</a-select-option>
                                <a-select-option value="s3">S3对象</a-select-option>
                            </a-select>
                        </a-col>
                        <a-col :span="1"></a-col>
                        <a-col :span="1">
                            <!-- <a-tooltip placement="right" v-if="new_wmts.type=='tif' && new_wmts.tif_storege_type=='s3'">
                                <template #title>选择S3连接</template>
                                <a-button @click="select_s3_con('tif')" style="margin: 0 auto;margin-right: 10px;">
                                    <template #icon>
                                        <plus-outlined />
                                    </template>
                                </a-button>
                            </a-tooltip> -->
                        </a-col>
                    </a-form-item>
                    <!-- tif  local-->
                    <a-form-item label="文件地址" v-if="new_wmts.type=='tif' && new_wmts.tif_storege_type=='local'">
                        <a-col :span="22">
                            <a-textarea v-model:value="new_wmts.tif_localpath"  :autosize="{ minRows: 3, maxRows: 6 }"/>
                        </a-col>
                    </a-form-item>
                    <!-- tif  s3-->
                    <a-form-item label="S3-key" v-if="new_wmts.type=='tif' && new_wmts.tif_storege_type=='s3'">
                        <a-col :span="22">
                            <a-textarea v-model:value="new_wmts.tif_s3path"  :autosize="{ minRows: 3, maxRows: 6 }"/>
                        </a-col>
                    </a-form-item>
                    <!-- <a-form-item label="endPoint" v-if="new_wmts.type=='tif' && new_wmts.tif_storege_type=='s3'">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts.endPoint"  />
                        </a-col>
                    </a-form-item>
                    <a-form-item label="accessKeyId" v-if="new_wmts.type=='tif' && new_wmts.tif_storege_type=='s3'">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts.accessKeyId"  />
                        </a-col>
                    </a-form-item>
                    <a-form-item label="secretAccessKey" v-if="new_wmts.type=='tif' && new_wmts.tif_storege_type=='s3'">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts.secretAccessKey"  />
                        </a-col>
                    </a-form-item>
                    <a-form-item label="bucket" v-if="new_wmts.type=='tif' && new_wmts.tif_storege_type=='s3'">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts.bucket"  />
                        </a-col>
                    </a-form-item> -->
                    <a-form-item label="真Xmin" v-if="new_wmts.type=='tif'">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts.tiftxmin"  />
                        </a-col>
                    </a-form-item>
                    <a-form-item label="真Ymax" v-if="new_wmts.type=='tif'">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts.tiftymax"  />
                        </a-col>
                    </a-form-item>


                    <!-- bundle-->
                    <a-form-item label="服务文件地址" v-if="new_wmts.type=='bundle'">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts.bundle_localpath"  />
                        </a-col>
                    </a-form-item>

                    <!-- request-->
                    <a-form-item label="网络地址" v-if="new_wmts.type=='request'">
                        <a-col :span="21">
                            <a-input v-model:value="new_wmts.request_url"  />
                        </a-col>
                        <a-col :span="1"></a-col>
                        <a-col :span="1">
                            <a-tooltip placement="right">
                                <template #title>https://t3.tianditu.gov.cn/DataServer?T=cia_c&X=${R}&Y=${C}&L=${L}&tk=ba65bdaed6cfa7b9f6ca802426126a2d</template>
                                <question-circle-outlined class="ico-tips" style="margin: 0 auto;margin-right: 10px;"/>
                            </a-tooltip>
                        </a-col>
                    </a-form-item>
                    <a-form-item label="切片坐标系" v-if="new_wmts.type=='request'">
                        <a-col :span="21">
                            <a-input v-model:value="new_wmts.request_wkid"  />
                        </a-col>
                    </a-form-item>

                    
                </a-form>
            </a-tab-pane>
            <a-tab-pane key="add_wmts_storege" tab="服务缓存">
                <a-form :model="new_wmts_storege" name="basic" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" autocomplete="off">
                    <a-form-item label="使用缓存">
                        <a-col :span="22">
                            <a-select v-model:value="new_wmts_storege.use" style="width: 100%" placeholder="" size="small">
                                <a-select-option :value="true">是</a-select-option>
                                <a-select-option :value="false">否</a-select-option>
                            </a-select>
                        </a-col>
                    </a-form-item>
                    <a-form-item label="缓存格式" v-if="new_wmts_storege.use===true">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts_storege.format" />
                        </a-col>
                    </a-form-item>
                    <a-form-item label="缓存类型"  v-if="new_wmts_storege.use===true">
                        <a-col :span="22">
                            <a-select v-model:value="new_wmts_storege.type" style="width: 100%" placeholder="" size="small">
                                <a-select-option value="local">local</a-select-option>
                                <a-select-option value="s3">s3</a-select-option>
                            </a-select>
                        </a-col>
                        <a-col :span="1"></a-col>
                        <a-col :span="1">
                            <a-tooltip placement="right" v-if="new_wmts_storege.type=='s3'">
                                <template #title>选择S3连接</template>
                                <a-button @click="select_s3_con('cache_storege')" style="margin: 0 auto;margin-right: 10px;">
                                    <template #icon>
                                        <plus-outlined />
                                    </template>
                                </a-button>
                            </a-tooltip>
                        </a-col>
                    </a-form-item>
                    <!--  type=='local'-->
                    <a-form-item label="缓存目录"  v-if="new_wmts_storege.type=='local' && new_wmts_storege.use===true">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts_storege.localpath" />
                        </a-col>
                    </a-form-item>
                    <!--  type=='s3'-->
                    <a-form-item label="endPoint" v-if="new_wmts_storege.type=='s3' && new_wmts_storege.use===true">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts_storege.endPoint"  />
                        </a-col>
                    </a-form-item>
                    <a-form-item label="accessKeyId" v-if="new_wmts_storege.type=='s3' && new_wmts_storege.use===true">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts_storege.accessKeyId"  />
                        </a-col>
                    </a-form-item>
                    <a-form-item label="secretAccessKey" v-if="new_wmts_storege.type=='s3' && new_wmts_storege.use===true">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts_storege.secretAccessKey"  />
                        </a-col>
                    </a-form-item>
                    <a-form-item label="bucket" v-if="new_wmts_storege.type=='s3' && new_wmts_storege.use===true">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts_storege.bucket"  />
                        </a-col>
                    </a-form-item>
                    <a-form-item label="prekey" v-if="new_wmts_storege.type=='s3' && new_wmts_storege.use===true">
                        <a-col :span="22">
                            <a-input v-model:value="new_wmts_storege.prekey"  />
                        </a-col>
                    </a-form-item>
                </a-form>
            </a-tab-pane>
        </a-tabs>
        </a-drawer>
        <edit_s3 />
    </a-config-provider>
</template>
<script>
import { notification } from 'ant-design-vue';
import {defineAsyncComponent } from 'vue' 
import zhCN from 'ant-design-vue/es/locale/zh_CN';

import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";

import Graphic from "@arcgis/core/Graphic.js";


import GroupLayer from "@arcgis/core/layers/GroupLayer.js";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer.js";
import ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";

import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";

import * as geometryEngine from "@arcgis/core/geometry/geometryEngine.js";
import * as projection from "@arcgis/core/geometry/projection.js";
import SimpleRenderer from "@arcgis/core/renderers/SimpleRenderer.js";
import * as rasterFunctionUtils from "@arcgis/core/layers/support/rasterFunctionUtils.js";

import reactiveUtils from "@arcgis/core/core/reactiveUtils.js";

import esriConfig from "@arcgis/core/config.js";
esriConfig.assetsPath = "./assets";
esriConfig.workers.workerPath = "./assets/esri/core/workers/RemoteClient.js";

//view
let ag_view;
//服务范围边框的layer
let ag_fc_layer;
//wmts图层集合
let ag_wmts_group;
export default {
    data() {
        return {
            zhCN,
            map_xyz:{
                zoom:0,
                x: 0,
                y: 0,
            },
            layer_data:[],
            layer_table_columns: [
                {
                    title: '名称',
                    dataIndex: 'name',
                    align: 'center',
                    width: 200,
                    ellipsis: true,
                },
                // {
                //     title: '源类型',
                //     dataIndex: 'stype',
                //     align: 'center',
                //     width: 50,
                // },
                // {
                //     title: '缓存类型',
                //     width: 70,
                //     dataIndex: 'temptype',
                //     align: 'center'
                // },
                {
                    title: '操作',
                    width: 80,
                    dataIndex: 'operation',
                    align: 'center'
                },
            ],
            layer_table_row_event: (record,index) => {
                return {
                    onDblclick: (event, index) => {
                        this.layer_table_row_dblclick_row(record, index);
                    },
                }
            },
            layer_table_pagination: {
                current: 1,
                size: 'small',
                pageSize: 10,
                total: 0,
                showTotal: (total, range) => {
                    return `共 ${total},${range[0]}/${range[1]}`
                },
            },
            map_wkid:4326,
            map_min_max:{
                xmin: -180,
                ymin: -90,
                xmax: 180,
                ymax: 90
            },
            



            // map_wkid:3857,
            // map_min_max:{
            //     xmin: -20037508.3427892,
            //     ymin: -20037508.3427892,
            //     xmax: 20037508.3427892,
            //     ymax: 20037508.3427892
            // },

            add_wmts_visible:false,
            tabs_activeKey:"add_wmts_src",
            new_wmts:{
                name:"GF100_0200_07021683_20221229115412_00PMS1_003_F",//服务
                type:"",//数据源类型 tif bundle request tile
                in_wkid:"4326",//输入的坐标系
                identifiers:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],//输出的级别

                //type=tif
                tif_type:"tif", //常规GEOTIFF:tif Cloud optimized GeoTIFF:cog
                tif_storege_type:"local",//tif存储类型 local s3
                //tif_storege_type="local"
                tif_localpath:"",
                //tif_storege_type="s3"
                tif_s3path:"0537902c-f62a-4b5f-bfe1-f20c8ab3a72c/GF100_0200_07021683_20221229115412_00PMS1_003_F/GF100_0200_07021683_20221229115412_00PMS1_003_F.tif",
                endPoint:"",
                accessKeyId:"",
                secretAccessKey:"",
                bucket:"",
                tiftxmin:-200,//tif的真实左上角 为-200时不使用
                tiftymax:-200,//tif的真实左上角

                //type=bundle
                bundle_localpath:"",


                //outwkid only be one 
                //type=request
                request_url:"",
                request_wkid:"",

                //type=tile
                tile_storege_type:"local",//tif存储类型 local s3
                tile_localpath:"", 
                prekey:"",
                
            },
            new_wmts_storege:{
                use:false,
                format: "L${L}/R${R}/C${C}.png",
                type:"local",//local s3
                localpath:"",

                endPoint:"",
                accessKeyId:"",
                secretAccessKey:"",
                bucket:"",
                prekey:"/123",
            },

            
            
        }
    },
    components: {
        edit_s3: defineAsyncComponent(() => import('./edit_s3.vue')),
    },
    beforeUnmount() {
        this.$mitt.off('enable_s3_links_result');
    },
    async mounted() {
        let loading = document.getElementById('Loading')
        if (loading != null) {
            document.body.removeChild(loading);
        }
        await this.get_address()
        await this.initmap(); //初始化地图
        this.get_layers();
        this.$mitt.on('enable_s3_links_result', data => {
            let type=data?.type
            if(type=="tif"){
                this.new_wmts.endPoint=data?.s3?.endPoint
                this.new_wmts.accessKeyId=data?.s3?.accessKeyId
                this.new_wmts.secretAccessKey=data?.s3?.secretAccessKey
                this.new_wmts.bucket=data?.s3?.bucket
            }
            else if(type=="cache_storege"){
                this.new_wmts_storege.endPoint=data?.s3?.endPoint
                this.new_wmts_storege.accessKeyId=data?.s3?.accessKeyId
                this.new_wmts_storege.secretAccessKey=data?.s3?.secretAccessKey
                this.new_wmts_storege.bucket=data?.s3?.bucket
            }
        });
    },
    methods: {
        async get_address() {
            this.$store.state.true_address =window.server_url
            // let address=await this.$apis.get_address({
            //     f:"json"
            // })
            // if(address?.status){
            //     let true_address=`http://${address?.ip}:${address?.port}`
            //     window.server_url= true_address+"/"
            //     this.$store.state.true_address = true_address
            //     console.log(this.$store.state.true_address)
            // }
            return true
        },
        async get_layers() {
            this.$Loading.start();
            let result = await this.$apis.get_layers()
            this.layer_data=[]
            if (result) {
                for (let i = 0; i < result?.length; i++) {
                    let element = result[i];
                    let BoundingBox=element?.BoundingBox
                    let one_layer_data=JSON.parse(JSON.stringify(element))
                    one_layer_data.show_tile=false
                    one_layer_data.geom=[
                        [
                            [BoundingBox?.Xmin,BoundingBox?.Ymax],
                            [BoundingBox?.Xmin,BoundingBox?.Ymin],
                            [BoundingBox?.Xmax,BoundingBox?.Ymin],
                            [BoundingBox?.Xmax,BoundingBox?.Ymax],
                            [BoundingBox?.Xmin,BoundingBox?.Ymax],
                        ]
                    ]
                    this.layer_data.push(one_layer_data)
                }
            }
            console.log(this.layer_data)
            this.$Loading.done();
        },
        async initmap() {
            //view
            let map_extent=Object.assign({},{
                spatialReference: {
                    wkid: this.map_wkid
                }
            },this.map_min_max)
            ag_view = new MapView({
                extent: map_extent,
                ui: {
                    components: []
                },
            });
            //服务范围边框的layer
            ag_fc_layer = new FeatureLayer({
                objectIdField: "OBJECTID",
                geometryType: "polygon",
                fields: [
                    {
                        name: "OBJECTID",
                        type: "oid"
                    }, {
                        name: "name",
                        type: "string"
                    }
                ],
                source: [],
                spatialReference: { wkid: this.map_wkid },
            });
            ag_fc_layer.renderer = {
                type: "simple",
                symbol: { 
                    type: "simple-fill",
                    color: [0, 0, 0, 0],
                    outline:{
                        width: 1,
                        color: [55, 55, 251, 1]
                    }
                }, 
            }
            //wmts图层集合
            ag_wmts_group=new GroupLayer({
                layers:[],
            })
            let ag_map=new Map({
                layers: [ag_wmts_group, ag_fc_layer]
            });
            ag_view.map = ag_map
            ag_view.container = "mapcontainer"
            ag_view.on("pointer-move", (event)=> {
                let map_point = ag_view.toMap(event)
                this.map_xyz.x = map_point?.x?.toFixed(4)
                this.map_xyz.y = map_point?.y?.toFixed(4)
            });
            await ag_view.when()
            return
        },
        async fit_extent(geometry){
            let new_geometry_extent =undefined
            let union_geometry_extent = geometry.extent

            await projection.load();
            let extent_3857 = projection.project(union_geometry_extent, {
                wkid: 3857
            })
            let extent_3857_buffer =geometryEngine.buffer(extent_3857, 8000,"meters")

            if(this.map_wkid==4326){
                new_geometry_extent = projection.project(extent_3857_buffer, {
                    wkid: 4326
                })
            }
            else if(this.map_wkid==3857){
                new_geometry_extent =extent_3857_buffer
            }
            ag_view.goTo(new_geometry_extent)
        },
        layer_table_pagination_change(pagination){
            this.layer_table_pagination.current = pagination.current
            if (pagination.pageSize != this.layer_table_pagination.pageSize) {
                this.layer_table_pagination.pageSize = pagination.pageSize
                this.layer_table_pagination.current = 1
            }
        },
        layer_table_row_dblclick_row(record, index) {
            console.log(record)
            // let find_pre_point = this.pre_points_layer.getSource().getFeatureById(record?.uuid);
            // if (find_pre_point) {
            //     find_pre_point.set('find', 1);
            //     let find_pre_point_geometry_FirstCoordinate = find_pre_point.getGeometry().getFirstCoordinate()
            //     let geometry_extent = this.geometry_pt_to_extent({
            //         coordinates: find_pre_point_geometry_FirstCoordinate
            //     })
            //     this.olview.fit(geometry_extent, {
            //         constrainResolution: false,
            //         earest: true,
            //     })
            // }
        },
        //tile cog
        add_WebTileLayer(record,type="tile"){
            let tif_tiled_layer =undefined;
            let tileInfo={
                dpi: 90.71428571427429,
                size: 256,
                origin: {
                    x: -180,
                    y: 90
                },
                spatialReference: {
                    wkid: 4326
                },
                lods: [
                    { level: 1, levelValue: 1, resolution: 0.703125, scale: 295497593.05875 },
                    { level: 2, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502 },
                    { level: 3, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508 },
                    { level: 4, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754 },
                    { level: 5, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877 },
                    { level: 6, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385 },
                    { level: 7, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693 },
                    { level: 8, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 },
                    { level: 9, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 },
                    { level: 10, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116 },
                    { level: 11, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 },
                    { level: 12, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 },
                    { level: 13, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 },
                    { level: 14, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447 },
                    { level: 15, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724 },
                    { level: 16, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619 },
                    { level: 17, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309 },
                    { level: 18, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655 },
                    { level: 19, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
                    { level: 20, levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 },
                ]
            }
            console.log(window.server_url)
            if(type=="tile"){
                let tile_url=`${this.$store.state.true_address}/ogc/${record.name}/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=${record.name}&STYLE=default&FORMAT=image/png&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`
                tif_tiled_layer =new WebTileLayer({
                    urlTemplate: tile_url,
                    spatialReference: {
                        wkid: 4326
                    },
                    id: record.name,
                    title: record.name,
                    copyright: '',
                    tileInfo:tileInfo,
                });
                console.log(tile_url)
            }
            else if(type=="cog"){
                let tif_path=record?.src?.tif_path
                let tif_path_split=tif_path.replaceAll("\\","/").split("/")
                let tif_name=tif_path_split[tif_path_split?.length-1]
                let cong_url=`${this.$store.state.true_address}/cog/${tif_name}`
                console.log(cong_url)
                tif_tiled_layer =new ImageryTileLayer({
                    url: cong_url,
                    customParameters:{
                        layer:tif_path
                    },
                    bandIds: [0,1,2],
                    id: record.name,
                    title: record.name,
                    copyright: '',
                    tileInfo: tileInfo,
                });
            }
            return tif_tiled_layer
        },
        async remove_layer_feature(record){
            let query = ag_fc_layer.createQuery();
            query.where = `name = '${record?.name}'`;
            let results = await ag_fc_layer.queryFeatures(query)
            if (results?.features?.length > 0) {
                var lightFeature = results.features[0];
                await ag_fc_layer.applyEdits({
                    deleteFeatures: [{
                        objectId: lightFeature?.attributes?.OBJECTID
                    }]
                }); 
            }
            ag_wmts_group.removeAll()
        },
        async show_layer(record){
            record.show_cog=false
            await this.remove_layer_feature(record)
            let feature = new Graphic({
                geometry: {
                    type:"polygon",
                    rings: record?.geom,
                    spatialReference: {
                        wkid: 4326
                    }
                },
                attributes: {
                    name: record?.name,
                }
            })
            await ag_fc_layer.applyEdits({
                addFeatures: [feature]
            });
            record.show_tile=true
            this.fit_extent(feature?.geometry)
            let _wmts_layer=this.add_WebTileLayer(record,"tile")
            setTimeout(()=>{
                ag_wmts_group.addMany([_wmts_layer])
            },1000)
        },
        async hide_layer(record){
            await this.remove_layer_feature(record)
            record.show_tile=false
        },
        async show_cog_layer(record){
            record.show_tile=false
            await this.remove_layer_feature(record)
            let feature = new Graphic({
                geometry: {
                    type:"polygon",
                    rings: record?.geom,
                    spatialReference: {
                        wkid: 4326
                    }
                },
                attributes: {
                    name: record?.name,
                }
            })
            await ag_fc_layer.applyEdits({
                addFeatures: [feature]
            });
            record.show_cog=true
            this.fit_extent(feature?.geometry)
            let _wmts_layer=this.add_WebTileLayer(record,"cog")
            setTimeout(()=>{
                ag_wmts_group.addMany([_wmts_layer])
            },1000)
        },
        async hide_cog_layer(record){
            await this.remove_layer_feature(record)
            record.show_cog=false
        },			
        refresh_layers(){
            this.layer_table_pagination.current =1
            this.get_layers()
        },
        add_wmts(){
            this.add_wmts_visible=true
        },
        add_wmts_drawer_close(){
            this.add_wmts_visible=false
        },
        select_s3_con(type){
            this.$mitt.emit("enable_s3_links",{
                type,
            })
        },
        async enable_add_wmts(){
            console.log("enable_add_wmts")
            //如果认证通过
            console.log(this.new_wmts)
            console.log(this.new_wmts_storege)
            let add_wmts_result=await this.$apis.add_wmts({
                wmts:this.new_wmts,
                cache:this.new_wmts_storege,
            })
            if(add_wmts_result?.result){
                this.get_layers()
                this.add_wmts_visible=false
            }
            else{
                this.$message.error(add_wmts_result?.message)
            }
        },
        show_Capabilities(record){
            window.open(`${this.$store.state.true_address}/ogc/${record.name}/wmts?`, '_blank')
        },
        async delete_layer(record){
            let add_wmts_result=await this.$apis.del_wmts({
                name:record?.name,
            })
            this.get_layers()
        },
        get_tile(record){
            // window.open(`${window.server_url}ogc/${record.name}/wmts?`, '_blank')
        },
    },
};
</script>
<style >
#nprogress .bar {
  height: 4px !important;
}
.white-collapse .ant-form-item{
    margin-bottom: 12px;
}
.ant-alert-message{
    font-size: 12px;
}
</style>